<template>
  <div class="content">
    <div class="title">
      <p class="bigTitle">{{systemName}}</p>
      <p class="smlTitle">初始化向导</p>
    </div>
    <!-- <el-button type="primary" @click="barnck" style="position: absolute; left: 28px; top: 45px;">返回</el-button> -->
    <div class="networkTitle">
      <p>{{lineOnline}}</p>
      <el-radio-group v-model="lineType" @change="radioChange">
        <el-radio label="line">在线注册</el-radio>
        <!-- <el-radio label="online">离线注册</el-radio> -->
      </el-radio-group>
    </div>
    <div class="steps">
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px" v-if="lineType=='line'">
        <el-step title="服务器地址配置" @click.native="active=0"></el-step>
        <el-step title="录入注册信息" @click.native="active=1"></el-step>
        <el-step title="完成" @click.native="active=2"></el-step>
        <!-- <el-step title="服务器地址配置"></el-step>
        <el-step title="录入注册信息"></el-step>
        <el-step title="完成"></el-step> -->
      </el-steps>
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px" v-else>
        <el-step title="导入配置文件" @click.native="active=0"></el-step>
        <el-step title="录入注册信息" @click.native="active=1"></el-step>
        <el-step title="完成" @click.native="active=2"></el-step>
      </el-steps>
    </div>
    <!-- 服务器地址配置 -->
    <configureServices v-if="active==0" ref="step0" :lineType="lineType" @product="product"/>
    <!-- 录入注册信息 -->
    <initialization v-if="active==1" ref="step1" :lineType="lineType" @product="product" @pre="pre"/>
    <!-- 完成 -->
    <div style="width:100%;height:430px;" v-if="active==2" :lineType="lineType">
      <el-row style="width:100%;height:100%;padding:20px 0;">
        <el-col :span="6" class="colImg">
          <img src="../../assets/images/check.png" alt="">
        </el-col>
        <el-col :span="18" style="padding-left:40px;height:100%;">
          <div class="formDiv">
            <i class="el-icon-circle-check" style="font-size:30px;"></i>
            <!-- <span style="color:#fbc44a">注册成功！</span> -->
            <span>注册成功！</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="deploy-btn" v-if="active !==2">
      <el-button type="primary" @click="$router.go(-1)" v-if="active == 0">上一步</el-button>
    </div>
    <div class="deploy-btn" v-if="active==2">
      <el-button type="primary" @click="complate">完 成</el-button>
    </div>
  </div>
</template>

<script>
import configureServices from './configureServices.vue';
import initialization from './initialization.vue';
import acceptAdmin from './acceptAdmin.vue';
export default {
  components: { configureServices, initialization, acceptAdmin },
  data() {
    return {
      active: 0,
      lineOnline: '网络模式注册向导',
      lineType: 'line',
      systemName:window.systemName
    }
  },
  methods: {
    radioChange(e) {
      this.active = 0
      if (e == 'line') {
        this.lineOnline = '网络模式注册向导'
      } else {
        this.lineOnline = '离线注册向导'
      }
    },
    complate() {
      this.$router.push({
        path: "/login",
        name: "login",
      });
    },
    product() {
      this.active++;
    },
    // 上一步
    pre() {
      this.active--;
    },
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.content {
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(to bottom right, #0d4462, #206b93, #082433); */
  background-image: linear-gradient(to bottom, #a8f7cc, rgb(247, 244, 236));
  /* color: #ddd; */
  /* background: url('../../assets/images/beijing.jpg'); */
  background-size: 100% 100%;
  font-size: 20px;
  padding: 15px 25px 0 25px;
  position: relative;
  /* bottom: 0; */
}
.title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.bigTitle {
  font-size: 34px;
  margin-right: 40px;
  margin: 0 40px 0 0;
}
.smlTitle {
  font-size: 20px;
  margin: 0;
}
.steps {
  /* width: 68%; */
}
.deploy-btn {
  position: absolute;
  text-align: right;
  bottom: 45px;
  left: 56%;
}
.colImg {
  border-right: 1px solid #ddd;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div {
  background: rgba(13, 68, 98, 0.6);
  padding: 5px 0;
  margin-bottom: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.networkTitle {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.formDiv {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(255, 176, 0);
}
img {
  width: 150px;
}
:deep(.el-step) {
  cursor: pointer;
}
</style>